<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <p style="color:red;">{{ parsePdfIng ? "解析pdf中..." : "" }}</p>
    <input type="file" name="getPdf" id="pdfInput" @change="handlePdfChange" />
    <div class="wrapper">
      <!-- <pdf url='http://gw-dev.jiangtai.com/jtpf/res-svc/res/v3/download?fileId=2095220252559543043&free=1' /> -->
      <pdf style="width:300px;" :file="file" v-if="file" />
    </div>
    <template v-if="imgs && imgs.length > 0">
      <p>123</p>
      <img :src="src.value" alt="" v-for="src of imgs" />
    </template>
  </div>
</template>

<script>
import pdf from "../components/cdd_vue_pdf";
import PdfView from "../components/pdfView.js";

// @ is an alias to /src
export default {
  name: "Home",
  data() {
    return {
      parsePdfIng: false,
      pdfUrl: "",
      file: null,
      imgs: []
    };
  },
  components: {
    pdf
  },
  methods: {
    handlePdfChange(e) {
      const file = e.target.files[0];
      this.file = file;
      // const reader = new FileReader();
      // this.parsePdfIng = true;
      // let self = this;
      // 'https://gw-dev.jiangtai.com/res-svc/res/v3/download?applicationName=ins-svc&businessTypeCode=ins_app&businessDataTag=T2006051551439840958&free=0&fileId=2182619177721006363'
      // reader.onload = function(e) {
      //   self.parsePdfIng = false;
      //   const url = e.target.result;
      //   console.log(`url is`, url);
      //   self.pdfUrl = url;

      // const loadingTask = pdfjs.getDocument({ url });
      // if (loadingTask.promise) {
      //   loadingTask.promise.then(pdf => {
      //     // console.log(`pdf is`, pdf.numPages);
      //     self.parsePdfIng = false;
      //     pdf.getPage(1).then(page => {
      //       renderPage(page);
      //     });
      //   });
      // }
      // };
      // reader.readAsDataURL(file);

      function renderPage(page) {
        let scale = 1.5;
        let viewport = page.getViewport({ scale: scale });

        // let canvas = document.getElementById("c1");
        let canvas = document.createElement("canvas");
        let context = canvas.getContext("2d");
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        let renderContext = {
          canvasContext: context,
          viewport: viewport
        };
        page.render(renderContext).promise.then(res => {
          console.log(`task is`, res);
          console.log(`canvas`, canvas.toDataURL());
        });
      }
    },
    getFile() {
      fetch(
        "http://gw-test.jiangtai.com/jtpf/res-svc/res/v3/download?fileId=2095240129670808822&free=1",
        {
          method: "get"
        }
      )
        .then(res => {
          return res.blob();
        })
        .then(data => {
          let reader = new FileReader();
          reader.onload = function(e) {
            console.log(`url is`, e.target.result);
          };
          reader.readAsDataURL(data);
          console.log(`url is`, canvas.toDataUrl());
        });
    }
  },
  components: {
    pdf
  },
  mounted() {
    // this.getFile();
    PdfView.GetPdf({
      url:
        "http://gw-dev.jiangtai.com/jtpf/res-svc/res/v3/download?fileId=2095220252559543043&free=1",
      options:{
        scale:1.8
      }
    }).then(res => {
      console.log(`res is`, res);
      this.imgs = res.imgs;
    });
  }
};
</script>
<style lang="scss" scoped>
.canvas-container {
  width: 500px;
  height: 500px;
}
.wrapper {
  width: 500px;
}
</style>
